<template>
  <div class="monitor">
    <p class="title">
      车辆入场实时动态
      <!-- <img style="height: 0.7em;margin-left: 0.3em;background-size: cover;background-repeat: no-repeat;" src="../../../../assets/bigDataSourceImage/barTitleIcon.png"> -->
      <img class="title-icon iconOne" src="../../../../assets/bigDataSourceImage/titleIcon1.png"><img class="title-icon iconTwo" src="../../../../assets/bigDataSourceImage/titleIcon2.png"><img class="title-icon iconThree" src="../../../../assets/bigDataSourceImage/titleIcon3.png">
    </p>
    <div class="content">

    </div>
  </div>
</template>

<script>
  export default {
    name: 'monitor',
    data() {
      return {

      }
    },
    mounted() {

    },
    methods: {

    }
  }
</script>

<style scoped>
  .monitor {
    height: 100%;
    padding: 1.4em;
    border: 1px solid transparent;
    border-image-source: url('../../../../assets/bigDataSourceImage/box1.png');
    border-image-slice: 26 26 26 26;
    border-image-repeat: stretch;
    border-image-width: 26px;
    box-sizing: border-box;
  }
  .title {
    margin: 0;
    color: #fff;
    font-size: 0.8em;
  }
  .content {
    margin-top: 0.3em;
    height: calc(100% - 1.4em);
    background-image: url(../../../../assets/bigDataSourceImage/linshi.jpg);
  }
  .title-icon {
    height: 0.7em;
    margin-right: -3px;
  }
  .iconOne,
  .iconTwo,
  .iconThree {
    animation: enlarge 0.9s infinite;
  }
  .iconTwo {
    animation-delay: 0.3s;
  }
  .iconThree {
    animation-delay: 0.6s;
  }
  
  @keyframes enlarge {
    0% {transform: scale(1);}
    33.33% {transform: scale(1.3);}
    66.66% {transform: scale(1);}
    100% {transform: scale(1);}
  }

</style>
